import { Space, Table,Badge,Button,Input,Image  } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import React,{useEffect,useState } from 'react';
import {useDispatch,useSelector} from "react-redux"
import Lazyload from "react-lazyload"

import * as api from "../../api/index"
import Model from "../../compontens/Model"
import Edit from "../../compontens/Edit"
interface DataType {
  key: number;
  name: string;
  age: number;
  state:string;
  id:string;
  img:string
  Lazyload?:string,
  record:any
  
}
type Props = {}

const stateFn = (key:string) => {
  switch (key) {
    case "已完成":
      return "success"
    case "未完成":
      return "error"
    case "进行中":
      return "warning"
    default:
      break;
  }
}


// const dispatch = useDispatch()

const App = (props: Props) => {
  const [editValue,setEditValue] = useState({})
  const columns: ColumnsType<DataType> = [
    {
      title: 'Key',
      dataIndex: 'key',
      key: 'key',
      sorter: (a, b) => a.key - b.key,
    },
    {
      title: 'Image',
      dataIndex: 'img',
      key: 'img',
      render: (_, record) => (
        <span>
          <Lazyload>
        <Image 
         width={50}
         height={50}
         src={record.img}
         />
        </Lazyload>
        </span>
       ),
    },
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: 'Age',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: 'City',
      dataIndex: 'city',
      key: 'city',
    },
    {
      title: 'State',
      dataIndex: 'state',
      key: 'state',
      render: (_, record) => (
       <span>
        <Badge status={stateFn(record.state)}/>
        <span>{record.state}</span>
       
       </span>
      ),
    },
    {
      title: 'Action',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          <Button onClick={()=>edit_list(record)}>编辑</Button>
         <Button onClick={()=>del(record.id)}>删除</Button>
        </Space>
      ),
    },
  ];
  const edit_list=(id:any)=>{
    setIsModalVisible1(true);
   
  }
  const del=(id:any)=>{
    console.log(id);
    dispatch(api.sub_list(id))
  }
  const data=useSelector((state:any)=>{
    return state.reducer.data
  })
  // console.log(data);
  
  const dispatch = useDispatch()
  useEffect(()=>{
    dispatch<any>(api.getlist())
  },[])
  
  const [isModalVisible, setIsModalVisible] = useState(false);
  const handleOk1 = () => {
    setIsModalVisible1(false);
    
  };
  const handleCancel1 = () => {
    setIsModalVisible1(false);
  };
  const showModal1 = () => {
    setIsModalVisible1(true);
  };
  const handleOk = () => {
    setIsModalVisible(false);
    
  };
  const handleCancel = () => {
    setIsModalVisible(false);
  };
  const showModal = () => {
    setIsModalVisible(true);
  };


  const [isModalVisible1, setIsModalVisible1] = useState(false);
 
  let tan={isModalVisible,handleCancel,handleOk}
  let tan1={isModalVisible1,handleCancel1,handleOk1,Edit}
  const searchFn=(e:any)=>{
 dispatch(api.search(e))
  
  }
  return (
    <div>
       <Button onClick={showModal}>新增</Button>
       <Input placeholder="Basic usage" 
       style={{width:"200px"}} 
       onPressEnter={(e)=>searchFn((e.target as HTMLInputElement).value)} onInput={(e)=>searchFn((e.target as HTMLInputElement).value)}/>
       <Model {...tan}></Model>
       <Edit {...tan1}></Edit>
      <Table columns={columns} scroll={{ y: 300, x: '100vw' }} pagination={{pageSize:5}} dataSource={data}/>
    </div>
   
  )
}
export default App;